window.addEventListener("load", function () {
	//回到顶部
	window.addEventListener("scroll", function () {
		if (window.scrollY >= 200) {
			$("#back").style.transition = "opacity 1s";
			$("#back").style.opacity = 1;
		} else {
			$("#back").style.opacity = 0;
		}
	});
	$("#back").addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});

	//头部标签渲染
	const apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	let html = "";
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class="active" title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class="fb" title=${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li  title=${v.keyword}>${v.name}</li>`;
		}
	});
	$("#apilist").innerHTML = html;
	//功能二:API分类区点击增加激活样式
	//1.获取相关节点
	//$("#apilist li")
	$("#apilist li").forEach(function (v) {
		v.addEventListener("click", function () {
			//排他 清除激活的li
			$("#apilist li").forEach(function (item) {
				item.classList.remove("active");
			});

			//再给当前被点击的对象增加激活样式
			this.classList.add("active");

			//功能三
			//1.将this的textContent赋值给strong
			$("#aipinput strong").textContent = this.textContent;
			console.log($("#aipinput strong"));
			//2.将this的title赋值给搜索框的value
			$("#aipinput input").value = this.title;
		});
	});

	//input点击清空内容
	$("#aipinput input").addEventListener("click", function () {
		this.value = " ";
	});

	//下面盒子内容动态渲染
	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	//渲染
	// let cradsHtml = " ";
	// listDataArr.forEach(function (v) {
	// 	cradsHtml += `
	// 	<li class="rel">
	// 	<img src="../imgs/${v.img}" alt="图片已损坏" />
	// 	<p>${v.name}</p>
	// 	<p class=${v.isSpecial ? "fc-red" : "fc-gree"}>${v.price}</p>
	// 	${v.isSpecial ? '<span class = "abs" >企业专用</span>' : ""}
	// 	<a class="abs" href="#">申请数据</a>
	// 	</li>
	// 	`;
	// });
	// $("#aipbt-box").innerHTML = cradsHtml;

	//分页符
	$(".pagination ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			$(".pagination ul li").forEach(function (item) {
				item.classList.remove("active");
			});
			this.classList.add("active");
			render(Number(v.textContent), 6, listDataArr);
		});
	});
	//跳转页面

	function render(pagination, pageSize, arr) {
		//获取开始下标
		let statIndex = (pagination - 1) * pageSize;
		//定义变量获取分出每次页面的数据
		const result = arr.slice(statIndex, statIndex + pageSize);
		let cradsHtml = "";
		result.forEach(function (v) {
			cradsHtml += `
			<li class="rel">
		<img src="../imgs/${v.img}" alt="图片已损坏" />
		<p>${v.name}</p>
		<p class=${v.isSpecial ? "fc-red" : "fc-gree"}>${v.price}</p>
		${v.isSpecial ? '<span class = "abs" >企业专用</span>' : ""}
		<a class="abs" href="#">申请数据</a>
		</li>
			`;
		});
		$("#aipbt-box").innerHTML = cradsHtml;
	}
	render(1, 6, listDataArr);

	// 蒙层
	$("#aipbt-box").addEventListener("click", function (e) {
		if (e.target.localName === "a") {
			$(".mask").style.display = "block";
			document.body.style.overflow = "hidden";
			e.preventDefault();
		}
	});
	$(".mask").addEventListener("click", function (e) {
		this.style.display = "none";
		document.body.style.overflow = "auto";
	});
	//阻止登录框的事件传播
	$(".register").addEventListener("click", function (e) {
		e.stopPropagation();
	});

	//功能二:点击模态框中的TAP按钮,对应按钮要激活,显示对应的form表单
	// 1.获取相关节点
	// $(".registertato a");
	// 2.给TAP的按钮绑定点击事件
	$(".register form")[0].style.display = "block";
	$(".registertato a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			//3.排他思想
			$(".registertato a").forEach(function (item, index) {
				item.classList.remove("active");
				$(".register form")[index].style.display = "none";
			});
			$(".register form")[i].style.display = "block";
			//4.再给当前按钮添加样式激活样式
			v.classList.add("active");
		});
	});
});
